【 YouTube の動画再生リストを構成動画ごとに分解表示 】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
xml:lang
=
"ja"
lang
=
"ja"
>
<
head
>
<
style
type
=
"text/css"
>
<!--
BODY, TH, TD { font-family: "ＭＳ 明朝,Osaka,serif"; font-size: medium; font-style: normal;}
-->
</
style
>
<
title
>OHHIRAYAMA</
title
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=Shift_JIS"
>
<
meta
http-equiv
=
"Content-Style-Type"
content
=
"text/css"
/>
<
meta
http-equiv
=
"Content-Script-Type"
content
=
"text/javascript"
/>
<
BASE
target
=
"_top"
>
</
head
>
<
body
>
<
table
width
=
"800"
cellspacing
=
"0"
cellpadding
=
"0"
style
=
"border:2px solid blue;"
bgcolor
=
"white"
align
=
"center"
>
<
tr
><
td
>
<!-- 空白のパーツ -->
<
iframe
src
=
"./../../Common Data 2/index-main-9.htm"
width
=
"100%"
height
=
"1"
frameborder
=
"0"
scrolling
=
"no"
marginheight
=
"0"
></
iframe
>
<!-- タイトルバー -->
<
iframe
src
=
"./../../Common Data 2/index-main-12.htm"
width
=
"100%"
height
=
"50"
frameborder
=
"0"
scrolling
=
"no"
marginheight
=
"0"
></
iframe
>
<!-- 空白のパーツ -->
<
iframe
src
=
"./../../Common Data 2/index-main-9.htm"
width
=
"100%"
height
=
"1"
frameborder
=
"0"
scrolling
=
"no"
marginheight
=
"0"
></
iframe
>
<!-- コマンドパーツ -->
<
script
type
=
"text/javascript"
content
=
"charset=shift_jis"
>
// Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var video = 'T_t9B87xUBo';
var video_list = 'PLL88QzNiFV4hAhyykCQK5M6E6epCrAgd1';
var player_h = '450';
var player_w = '780';
var player_h2 = '215';
var player_w2 = '380';
var nos = 0;
var no = 0;
var done = false;
var done1 = false;
var done2 = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player1', {
height: player_h,
width: player_w,
videoId: video,
playerVars: {
autoplay: 0,
controls: 0,
loop: 0,
rel: 0,
showinf: 0,
wmode: 'transparent'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady( evt ) {
// alert( 'Player Ready' );
// evt.target.playVideo( );
if ( ! done1 ) $( '#message1' ).text( '準備完了！' );
if ( ! done1 && ! done2 ) loadplaylist( evt );
done1 = true;
}
function onPlayerStateChange( evt ) {
// alert( 'Player State Change : ' + evt.data );
if ( evt.data == YT.PlayerState.PLAYING && !done ) {
setTimeout( stopVideo, 6000 );
done = true;
}
if ( evt.data == YT.PlayerState.ENDED && done1 ) {
// player.playVideo( );
}
if ( evt.data == YT.PlayerState.BUFFERING && done2 ) {
// alert( 'play list nos ( 1 ) : ' + nos );
var val = true;
player.setLoop( val );
list_n = new Array( );
// alert( 'play list nos ( 2 ) : ' + nos );
list_n = player.getPlaylist( );
// alert( 'play list nos ( 3 ) : ' + nos );
nos = list_n.length;
var nos1 = nos + 1;
// alert( 'play list nos ( 4 ) : ' + nos );
$( '#message1' ).text( '準備完了！ ' + '再生リストの動画数は 【 ' + nos1 + ' 】 ' );
player.stopVideo( );
$( '#message2' ).text( '再生リスト 解体開始 ！' );
setpanellist( nos1, list_n );
}
if ( evt.data == YT.PlayerState.PLAYING && done2 ) {
// alert( 'play list nos ( 3 ) : ' + nos );
// var n = player.getPlaylistIndex( );
var n = evt.target.getPlaylistIndex( );
no = n;
var n1 = n + 1;
var nos1 = nos + 1;
// alert( 'play list nos ( 4 ) : ' + nos );
$( '#message1' ).text( '再生中！' + ' 動画番号 【 ' + n1 + ' ／ ' + nos1 + ' 】 ' );
}
}
function setpanellist( nos1, list_n ) {
var i = 0;
var num = 'player';
var num1 = '';
for ( i = 1; i <
=
nos1
;
i
+
+
)
{
if
(
i
> 10 ) break;
num1 = '';
num1 = '0' + i;
if ( i > 9 ) num1 = i;
var num2 = num + num1;
$( '#message2' ).text( '再生リスト 解体処理中 ！' + ' パネル番号 ： ' + num2 );
setpanelvideo( num2, list_n[ i - 1 ] );
}
var n = i - 1;
$( '#message2' ).text( '再生リスト 解体処理終了 ！' + ' パネル数 ： ' + n );
}
function setpanelvideo( num, video_code ) {
player = new YT.Player( num, {
height: player_h2,
width: player_w2,
videoId: video_code,
playerVars: {
autoplay: 0,
controls: 0,
loop: 0,
rel: 0,
showinf: 0,
wmode: 'transparent'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function playvideonumdisp( ) {
var n = player.getPlaylistIndex( );
no = n;
var n1 = no + 1;
var nos1 = nos + 1;
// alert( 'play list nos ( 4 ) : ' + nos );
$( '#message1' ).text( '再生中！' + ' 動画番号 【 ' + n1 + ' ／ ' + nos1 + ' 】 ' );
}
function stopVideo() {
// player.stopVideo( );
}
function loadplaylist1( evt )
{
if ( ! done2 ) evt.target.cuePlaylist(
{ list: video_list,
listType: 'playlist',
index: 0,
StartSeconds: 0,
suggestedQuality: 'default'
}
);
done2 = true;
};
function loadplaylist( evt )
{
if ( ! done2 ) evt.target.loadPlaylist(
{ list: video_list,
listType: 'playlist',
index: 0,
StartSeconds: 0,
suggestedQuality: 'default'
}
);
done2 = true;
};
</
script
>
<
style
type
=
"text/css"
>
<!--
.style11 { color: blue; font-size: 10pt; font-weight: normal; }
-->
<!--
.style12 { color: blue; font-size: 10pt; font-weight: normal; }
-->
<!--
.style13 { color: red; font-size: 10pt; font-weight: normal; }
-->
</
style
>
<
script
type
=
"text/javascript"
src
=
"http://www.google.com/jsapi"
></
script
>
<
script
type
=
"text/javascript"
>
google.load( "jquery", "1.4" ); google.setOnLoadCallback( function( ){ $( document ).ready( function( ){
// $( '#message1' ).text( '準備完了！' );
// $( '#message2' ).text( '準備完了！' );
} ); } );
</
script
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
td
>
<
table
width
=
"100%"
style
=
"border:2px none blue; background:#ffffff;"
align
=
"center"
><
tr
><
td
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"left"
><
tr
>
<
td
class
=
"style1"
align
=
"center"
width
=
"150"
height
=
""
>メイン画面の処理</
td
>
<
td
width
=
"10"
bgcolor
=
"#ffffff"
align
=
"center"
height
=
"%"
></
td
>
<
td
class
=
"style1"
align
=
"left"
width
=
"%"
height
=
""
id
=
"message1"
>※ロード中……</
td
>
</
tr
></
table
>
</
td
></
tr
></
table
>
</
td
></
table
>
<!-- 動画埋め込みパーツをこの後に挿入 メイン -->
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
td
>
<
table
width
=
"100%"
style
=
"border:2px solid blue; background:#ffffff;"
align
=
"center"
><
tr
><
td
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
tr
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
id
=
"player1"
width
=
"780"
height
=
"450"
style
=
"border:2px solid blue; background:#ffffff;"
align
=
"center"
>【 player1 】</
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
</
tr
></
table
>
</
td
></
tr
></
table
>
</
td
></
table
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
td
>
<
table
width
=
"100%"
style
=
"border:2px none blue; background:#ffffff;"
align
=
"center"
><
tr
><
td
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"left"
><
tr
>
<
td
class
=
"style1"
align
=
"center"
width
=
"150"
height
=
""
>サブ画面の処理</
td
>
<
td
width
=
"10"
bgcolor
=
"#ffffff"
align
=
"center"
height
=
"%"
></
td
>
<
td
class
=
"style1"
align
=
"left"
width
=
"%"
height
=
""
id
=
"message2"
>※ロード中……</
td
>
</
tr
></
table
>
</
td
></
tr
></
table
>
</
td
></
table
>
<!-- 動画埋め込みパーツをこの後に挿入 サブ -->
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
td
>
<
table
width
=
"100%"
style
=
"border:2px solid blue; background:#ffffff;"
align
=
"center"
><
tr
><
td
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
tr
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
id
=
"player01"
width
=
"380"
height
=
"215"
style
=
"border:2px solid blue; background:#ffffff;"
align
=
"center"
>【 player01 】</
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
id
=
"player02"
width
=
"380"
height
=
"215"
style
=
"border:2px solid blue; background:#ffffff;"
align
=
"center"
>【 player02 】</
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
</
tr
></
table
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
tr
>
<
td
style
=
"background:#ffffff;"
width
=
"%"
height
=
"10"
align
=
"center"
></
td
>
</
tr
></
table
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
tr
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
id
=
"player03"
width
=
"380"
height
=
"215"
style
=
"border:2px solid blue; background:#ffffff;"
align
=
"center"
>【 player03 】</
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
id
=
"player04"
width
=
"380"
height
=
"215"
style
=
"border:2px solid blue; background:#ffffff;"
align
=
"center"
>【 player04 】</
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
</
tr
></
table
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
tr
>
<
td
style
=
"background:#ffffff;"
width
=
"%"
height
=
"10"
align
=
"center"
></
td
>
</
tr
></
table
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
tr
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
id
=
"player05"
width
=
"380"
height
=
"215"
style
=
"border:2px solid blue; background:#ffffff;"
align
=
"center"
>【 player05 】</
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
id
=
"player06"
width
=
"380"
height
=
"215"
style
=
"border:2px solid blue; background:#ffffff;"
align
=
"center"
>【 player06 】</
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
</
tr
></
table
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
tr
>
<
td
style
=
"background:#ffffff;"
width
=
"%"
height
=
"10"
align
=
"center"
></
td
>
</
tr
></
table
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
tr
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
id
=
"player07"
width
=
"380"
height
=
"215"
style
=
"border:2px solid blue; background:#ffffff;"
align
=
"center"
>【 player07 】</
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
id
=
"player08"
width
=
"380"
height
=
"215"
style
=
"border:2px solid blue; background:#ffffff;"
align
=
"center"
>【 player08 】</
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
</
tr
></
table
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
tr
>
<
td
style
=
"background:#ffffff;"
width
=
"%"
height
=
"10"
align
=
"center"
></
td
>
</
tr
></
table
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
tr
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
id
=
"player09"
width
=
"380"
height
=
"215"
style
=
"border:2px solid blue; background:#ffffff;"
align
=
"center"
>【 player09 】</
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
<
td
id
=
"player10"
width
=
"380"
height
=
"215"
style
=
"border:2px solid blue; background:#ffffff;"
align
=
"center"
>【 player10 】</
td
>
<
td
style
=
"background:#ffffff;"
width
=
"10"
height
=
"%"
align
=
"center"
></
td
>
</
tr
></
table
>
<
table
width
=
"100%"
heigght
=
"%"
style
=
"background:#ffffff;"
align
=
"center"
><
tr
>
<
td
style
=
"background:#ffffff;"
width
=
"%"
height
=
"10"
align
=
"center"
></
td
>
</
tr
></
table
>
</
td
></
tr
></
table
>
</
td
></
table
>
<!-- 挿入パーツの終了行 -->
<!-- 空白のパーツ -->
<
iframe
src
=
"./../../Common Data 2/index-main-9.htm"
width
=
"100%"
height
=
"1"
frameborder
=
"0"
scrolling
=
"no"
marginheight
=
"0"
></
iframe
>
<!-- フッタ -->
<
iframe
src
=
"./../../Common Data 2/index-main-8.htm"
width
=
"100%"
height
=
"50"
frameborder
=
"0"
scrolling
=
"no"
marginheight
=
"0"
></
iframe
>
<!-- 空白のパーツ -->
<
iframe
src
=
"./../../Common Data 2/index-main-9.htm"
width
=
"100%"
height
=
"1"
frameborder
=
"0"
scrolling
=
"no"
marginheight
=
"0"
></
iframe
>
</
td
></
tr
>
</
table
>
</
body
>
</
html
>